<html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <title>Google Maps JavaScript API v3 Example: Polyline Complex</title>
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
        <script type="text/javascript">

            var pathCoordinates = [];
            var poly;
            var map;

            function initialize() {
                var chicago = new google.maps.LatLng(41.879535, -87.624333);
                var myOptions = {
                    zoom: 7,
                    center: chicago,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    
                // We create pathCoordinates as an MVCArray so we can
                // manipulate it using the insertAt() method
                pathCoordinates = new google.maps.MVCArray();
    
                var polyOptions = {
                    path: pathCoordinates,
                    strokeColor: '#000000',
                    strokeOpacity: 1.0,
                    strokeWeight: 3
                }
                poly = new google.maps.Polyline(polyOptions);
                poly.setMap(map);

                // Add a listener for the click event
                google.maps.event.addListener(map, 'click', addLatLng);
            }

            function addLatLng(event) {
                var path = poly.getPath();
    
                // Because path is an MVCArray, we can simply append a new coordinate
                // and it will automatically appear
                path.insertAt(pathCoordinates.length, event.latLng);

                var marker = new google.maps.Marker({
                    position: event.latLng,
                    map: map
                });
                marker.setTitle("#" + pathCoordinates.length);
            }
        </script>
    </head>
    <body style="margin:0px; padding:0px;" onload="initialize()">
        <div id="map_canvas" style="width: 100%; height: 100%;"></div>
    </body>
</html>
